<template>
	<view class="navigation">
		<view class="column-end" v-if="position == 'fixed'" style="position: sticky;top: 0;"></view>
		<view class="column-end" :style="{'background': background,color: color, 'position': position}">
			<view class="row-between navigation-item" >
				<view class="row-start leading-left">
					<slot name="leading">
						<uni-icons type="arrowleft" size="21" :color="color" style="margin-left: 20upx;" @click="backtrack" v-if="!leading" />
					</slot>
				</view>
				<slot name="title">
					<view class="centre-title">{{title}}</view>
				</slot>
				<view class="row-end actions-right">
					<slot name="actions"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: { // 标题
				type: String,
				default: ''
			},
			background: { // 背景颜色
				type: String,
				default: '#FE5E49'
			},
			color: { // 文字颜色
				type: String,
				default: '#FFFFFF'
			},
			back: { // 返回事件类型
				type: Boolean,
				default: () => false
			},
			leading: {
				type: Boolean,
				default: () => false
			},
			position: {
				type: String,
				default: 'fixed'
			}
		},
		data() {
			return {
				height: 82
			};
		},
		methods: {
			backtrack() { // 返回事件
				this.back ? this.$emit('backtrack') : uni.navigateBack()
			}
		},
		mounted() {

		},
	}
</script>

<style scoped lang="scss">
	.navigation {
		width: 100%;
		.column-end{
			width: 100%;
			height: calc(var(--status-bar-height) + 88rpx);
			/* #ifdef MP-WEIXIN */
			height: calc(var(--status-bar-height) + 176rpx);
			/* #endif */
			top: 0;
			left: 0;
			z-index: 200;
			padding-bottom: 12upx;
		}
		.navigation-item {
			width: 100%;
			.centre-title {
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: bold;
			}
			.leading-left,
			.actions-right {
				flex: 1;
			}

			.actions-right {
				padding-right: 30upx;
			}
		}
	}
</style>
